<template>
  <div class="main">
    <div v-show="status === 'DOWN'">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span style="color: #409EFF;font-size: 20px">扫码授权接入微信小程序</span>
        </div>
        <div class="text item">
          <ul>
            <li>1、一个微信小程序仅可授权给一个我们的小程序。</li>
            <li>2、为保证所有功能的正常使用，授权时请保持默认选择，把权限统一授权给我们。</li>
            <li>3、新授权的小程序需与已授权的小程序及公众号主体一致；</li>
            <li>4、如果你的小程序已经授权给其他平台，请前往微信公众平台（设置→第三方授权管理→停止授权）解除授权。</li>
            <li>5、如果你在授权的授权接入出现问题，请及时联系我们，我们协助您授权。</li>

          </ul>
        </div>
        <div class="text item">
          <li style="color: #F56C6C">如果你在还没有注册小程序，可以参考教程自行注册，或联系我们协助您注册。</li>
        </div>
        <div class="text item" style="text-align: center;">
          <el-button type="primary" @click="goto_auth_url()">
            扫码授权接入
          </el-button>
        </div>
      </el-card>
    </div>
    <div class="body" style="padding: 5px;" v-show="status != 'DOWN'">
      <el-steps :active="step" simple style="margin-bottom: 22px;">
        <el-step title="1.提交审核申请" icon="el-icon-edit"></el-step>
        <el-step title="2.等待微信审核结果" icon="el-icon-refresh"></el-step>
        <el-step title="3.微信审核情况" icon="el-icon-view"></el-step>
        <el-step title="4.小程序已上线" icon="el-icon-star-off"></el-step>
      </el-steps>
      <el-row :gutter="10" style="min-height: 514px;">
        <el-col :span="6">
          <el-card shadow="hover">
            <div slot="header" class="clearfix" style="text-align:center">
              <span>版本控制</span>
            </div>
            <div class="text item">
              <el-table height="400" border :data="mainData" stripe style="width: 100%">
                <el-table-column prop="data" label="版本">
                </el-table-column>
                <el-table-column prop="text" label="版本号">
                </el-table-column>
              </el-table>
            </div>
            <div class="bottom clearfix" style="text-align:center;margin-top:15px">
              <el-button-group>
                <el-button size="small" type="primary" @click="bind()" round>重新授权</el-button>
                <el-button size="small" v-show="status==='UP' || status==='RE_AUDIT'|| status==='UN_PASS'||status==='PUBLISH'" type="danger" @click="commit()"
                  round>提交代码</el-button>
                <el-button size="small" v-show="status==='PASS'" type="danger" @click="release()" round>发布代码</el-button>

                <!-- <el-button v-show="status==='AUDIT'" type="danger" @click="submitAudit()" round>审核代码</el-button> -->
                <el-button size="small" v-show="status==='AUDIT'" type="danger" @click="undoCodeAudit()" round>审核撤回</el-button>

                <el-button size="small" type="danger" @click="unbind()" round>解除授权</el-button>

              </el-button-group>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <div slot="header" class="clearfix" style="text-align:center">
              <span>二维码</span>
            </div>
            <div class="text item" style="height: 400px;">
              <div class="code-content">
                <div class="code-img-box" :style="{backgroundImage:`url(${qrCodeUrl})`}">
                </div>
                <div style="margin:0 auto;text-align: center">
                  体验码[最新提交]
                </div>
                <div class="code-img-box" :style="{backgroundImage:`url(${mainQrCode})`}"></div>
                <div style="margin:0 auto;text-align: center">
                  首页码
                </div>
              </div>
            </div>
            <div class="bottom clearfix" style="text-align:center;margin-top:15px">
              <el-button-group>
                <el-button type="primary" size="small" @click="bindingTest" round>添加体验者</el-button>
                <el-button type="success" size="small" class="el-icon-download" @click="download_qrcode()" round>体验吗</el-button>
                <el-button type="success" size="small" class="el-icon-download" @click="download_maincode()" round>首页吗</el-button>
              </el-button-group>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <div slot="header" class="clearfix" style="text-align:center">
              <span>版本信息</span>
            </div>
            <div class="text item">
              <el-table height="400" border :data="versionData" stripe style="width: 100%">
                <el-table-column prop="createTime" label="时间">
                </el-table-column>
                <el-table-column prop="edition" label="版本号">
                </el-table-column>
                <el-table-column prop="status.desc" label="状态">
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <div slot="header" class="clearfix" style="text-align:center">
              <span>体验者</span>
            </div>
            <div class="text item">
              <el-table height="400" border :data="testData" stripe style="width: 100%">
                <el-table-column prop="wechatId" label="体验者微信号">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                  <template slot-scope="scope">
                    <el-button @click="unbindingTest(scope.row)" type="text" size="small">解绑</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

  </div>
</template>

<script>
import API from '@/api'
export default {
  data () {
    return {
      step: 1,
      mainData: [],
      testData: [],
      versionData: [],
      qrCodeUrl: '',
      mainQrCode: '',
      status: 'DOWN'
    }
  },
  created () {
    this.getMainData()
    this.getVersionData()
    this.getQrCodeUrl()
    this.getTestData()
    this.getMainQrCode()
  },
  methods: {
    goto_auth_url () {
      API.miniapp.getAuthUrl().then(({ data }) => {
        if (data.code === 0) {
          window.location.href = data.url
        }
      })
      // window.location.href="http://www.baidu.com";
    },
    // 获取主要信息
    getMainData () {
      API.miniapp.getMainData().then(({ data }) => {
        if (data.code === 0) {
          this.mainData = data.mainData
          this.status = data.status.value
        } else {
          this.$message({
            type: 'warning',
            message: data.msg
          })
        }
      })
    },
    // 获取版本信息
    getVersionData () {
      API.miniapp.getVersionData().then(({ data }) => {
        if (data.code === 0) {
          this.versionData = data.versionData
        } else {
          this.$message({
            type: 'warning',
            message: data.msg
          })
        }
      })
    },
    download_qrcode () {
      this.download(this.qrCodeUrl, 'qrcode.jpeg')
    },
    download_maincode () {
      this.download(this.mainQrCode, 'maincode.jpeg')
    },
    download (data, name) {
      if (!data) {
        return
      }
      let url = data
      let link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      link.setAttribute('download', name)

      document.body.appendChild(link)
      link.click()
    },
    // 重新绑定
    bind () {
      API.miniapp.getAuthUrl().then(({ data }) => {
        if (data.code === 0) {
          window.location.href = data.url
        }
      })
    },
    // 重新绑定
    unbind () {
      API.miniapp.unbind().then(({ data }) => {
        if (data.code === 0) {
          this.getMainData()
          this.getVersionData()
          this.getQrCodeUrl()
          this.getTestData()
          this.getMainQrCode()
        } else {
          this.$message({
            type: 'warning',
            message: data.msg
          })
        }
      })
    },
    bindingTest () {
      this.$prompt('请输入体验者微信号', '绑定体验者', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /\S/,
        inputErrorMessage: '体验者微信号不能为空'
      })
        .then(({ value }) => {
          API.miniapp.bindingTest(value).then(({ data }) => {
            if (data.code === 0) {
              this.getTestData()
              this.$message({
                type: 'success',
                message: '体验者: ' + value + '已经绑定'
              })
            } else {
              this.$message({
                type: 'warning',
                message: data.msg
              })
            }
          })
        })
        .catch(() => {})
    },
    unbindingTest (row) {
      API.miniapp.unbindingTest(row.wechatId).then(({ data }) => {
        if (data.code === 0) {
          this.getTestData()
          this.$message({
            type: 'success',
            message: '体验者: ' + row.wechatId + '解除绑定'
          })
        } else {
          this.$message({
            type: 'warning',
            message: data.msg
          })
        }
      })
    },
    // 获取体验着二维码
    getQrCodeUrl () {
      this.qrCodeUrl = API.miniapp.getQrCodeUrl()
    },
    // 获取小程序二维码
    getMainQrCode () {
      this.mainQrCode = API.miniapp.getMainQrCode()
    },
    // 获取体验者列表
    getTestData () {
      API.miniapp.getTestData().then(({ data }) => {
        if (data.code === 0) {
          this.testData = data.testData
        } else {
          this.$message({
            type: 'warning',
            message: data.msg
          })
        }
      })
    },
    // 代码提交
    commit () {
      API.miniapp.commit().then(({ data }) => {
        if (data.code === 0) {
          this.$message({
            type: 'success',
            message: '代码提交成功'
          })
          this.getVersionData()
          this.getMainData()
        } else {
          this.$message({
            type: 'warning',
            message: data.msg
          })
        }
      })
    },
    // 发布
    release () {
      API.miniapp.release().then(({ data }) => {
        if (data.code === 0) {
          this.$message({
            type: 'success',
            message: '代码发布成功'
          })
          this.getVersionData()
          this.getMainData()
        } else {
          this.$message({
            type: 'warning',
            message: data.msg
          })
        }
      })
    },
    // 审核代码
    submitAudit () {
      API.miniapp.submitAudit().then(({ data }) => {
        if (data.code === 0) {
          this.$message({
            type: 'success',
            message: '代码审核成功'
          })
          this.getVersionData()
          this.getMainData()
        } else {
          this.$message({
            type: 'warning',
            message: data.msg
          })
        }
      })
    },
    // 撤回审核
    undoCodeAudit () {
      API.miniapp.undoCodeAudit().then(({ data }) => {
        if (data.code === 0) {
          this.$message({
            type: 'success',
            message: '撤回审核成功'
          })
          this.getVersionData()
          this.getMainData()
        } else {
          this.$message({
            type: 'warning',
            message: data.msg
          })
        }
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.main {
  min-height: 100%;
  width: 100%;
  min-width: 1180px;
  overflow: hidden;
}

.body {
  padding: 20px 20px;
}

.code-content {
  width: 150px;
  margin: 0 auto;
  background-color: transparent;
}

.code-content .code-img-box {
  width: 100%;
  padding-top: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
